<template>
	<view class="my-page">
		<div :style="{
			height:`${statusBarHeight}px`,
			background:'#2f9aff'
		}"></div>

		<view class="headview">
			<image class="headImage" src="/static/images/my/my_bg.png" mode=""></image>
			<view class="headcontent">

				<image class="topImage" src="/static/images/my/my_top.png" mode=""></image>
				<view class="head_rightview">
					<view class="nameview">
						{{userInfor.name}}
					</view>
					<text class="addressview">
						{{userInfor.address}}
					</text>
				</view>
			</view>
			<view class="contentview">
				<view class="cont-top">
					<view class="cont-item" @click="btnClick(1)">
						<image src="/static/images/my/my_order.png" mode=""></image>
						<view>我的工单</view>
					</view>
					<view class="line"></view>
					<view class="cont-item" @click="btnClick(2)">
						<image src="/static/images/my/my_infor.png" mode=""></image>
						<view>个人资料</view>
					</view>
				</view>
				<view class="cont-bot">
					<view class="cont-item" v-for="(item,inx) in dataList" :key="inx" :class="item.type"
						@click="goUrl(item)">
						<view class="item-left">
							<image :src="item.image" mode=""></image>
							<text>{{item.text}}</text>
						</view>
						<view class="item-right">
							<view class="subText" v-if="item.subText">{{item.subText}}</view>
							<image v-else src="/static/images/my/my_jiantou.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	const dataList = ref([{
			image: "/static/images/my/my_feedback.png",
			text: "意见反馈",
			type: "type1",
			url: "/pages/my/feedback/feedback",
		},
		{
			image: "/static/images/my/my_question.png",
			text: "常见问题",
			type: "type2",
			url: "/pages/my/commonquestion/commonquestion",
		},
		{
			image: "/static/images/my/my_set.png",
			text: "通用设置",
			url: "/pages/my/generalSetup/generalSetup",
		},
		{
			image: "/static/images/my/my_server.png",
			text: "在线客服",
			url: "",
			subText: "立即联系"
		}
	]);
	const userInfor = {
		name: 'admin',
		address: '江苏南京'
	}
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
	});
	const btnClick = (n) => {
		if (n == 2) {
			uni.navigateTo({
				url: "/pages/my/personaData/personaData"
			})
		}else{
			uni.navigateTo({
				url:"/pages/my/myWorkOrder/myWorkOrder"
			})
		}
	};
	const goUrl = (item) => {
		console.log("点击了" + item.text)
		if (item.subText) {

		} else {
			uni.navigateTo({
				url: item.url
			})
		}
	};
</script>


<style scoped lang="scss">
	.my-page {
		background: #F2F6F5;
		height: 100vh;

		.headview {
			position: relative;
			height: 574rpx;

			.headImage {
				position: relative;
				width: 100%;
			}

			.headcontent {
				display: flex;
				align-items: center;
				position: absolute;
				top: 15%;
				height: 130rpx;

				.topImage {
					margin-left: 50rpx;
					height: 130rpx;
					width: 130rpx;
				}

				.head_rightview {
					height: 100rpx;
					margin-left: 40rpx;

					.nameview {
						font-size: 28rpx;
						color: black;
						width: 220rpx;
						margin-bottom: 10rpx;
						height: auto;
					}

					.addressview {
						font-size: 26rpx;
						padding: 2rpx 10rpx;
						border-radius: 30rpx;
						background: #CBEFEF;
						border: 1rpx solid #fff;
						color: rgb(0, 113, 107);
					}
				}
			}

			.contentview {
				width: calc(100% - 50rpx);
				margin-left: 25rpx;
				position: absolute;
				top: 45%;

				.cont-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 130rpx;
					border-radius: 20rpx;
					background: #fff;

					.cont-item {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						width: 48%;
						height: auto;
						font-size: 32rpx;

						image {
							width: 75rpx;
							height: 75rpx;
							margin: 0 30rpx;
						}
					}

					.line {
						width: 2rpx;
						height: 60%;
						background: #F2F6F5;
					}

				}

				.cont-bot {
					width: 100%;
					margin-top: 30rpx;

					.cont-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 30rpx;
						box-sizing: border-box;
						height: 130rpx;
						background: #fff;
						border-radius: 20rpx;
						margin-bottom: 20rpx;

						.item-left {
							display: flex;
							align-items: center;

							image {
								width: 55rpx;
								height: 55rpx;
								margin-right: 30rpx;
							}
						}

						.item-right {
							image {
								width: 20rpx;
								height: 30rpx;
							}

							.subText {
								font-size: 26rpx;
								padding: 6rpx 15rpx;
								border-radius: 30rpx;
								border: 1rpx solid rgb(0, 113, 107);
								color: rgb(0, 113, 107);
							}
						}
					}

					.type1 {
						border-radius: 20rpx 20rpx 0 0;
						margin-bottom: 0;
						border-bottom: 2rpx solid #F2F6F5;
					}

					.type2 {
						border-radius: 0 0 20rpx 20rpx;
					}
				}
			}
		}

	}
</style>